<template>
  <div>
    <el-input v-model="orgName" readonly placeholder="组织">
      <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="openDia"/>
      <i slot="suffix" class="el-input__icon el-icon-error" @click="changeDE"/>
    </el-input>
    <!-- 弹框 -->
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" title="组织选择" width="50%" append-to-body>
      <el-tree v-loading="loading" ref="tree" :data="jsonTree" :default-expanded-keys="['1']" node-key="id" style="min-width: 100%; width: 75%;">
        <span slot-scope="{ node, data }" class="custom-tree-node" @click="handleNodeClick(data)">
          <span>{{ node.data.text }}</span>
        </span>
      </el-tree>
      <div slot="footer" style="text-align:center" class="dialog-footer">
        <span slot="footer" class="dialog-footer">
          <el-button @click="clear">取 消</el-button>
          <el-button type="primary" @click="confirmHandle">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { getComOrgTreeList } from '@/api/admin/org/gms/companyOrgManage'
import {
  // msg,
  getJsonTree
} from '@/utils/index'
import formMixins from '@/mixins/formMixins'
// import {
//   mapGetters
// } from 'vuex'

export default {
  name: 'DepartM',
  components: {},
  mixins: [formMixins],
  props: {
    orgName: String,
    orgId: String
  },
  data() {
    return {
      dialogVisible: false,
      key: '',
      idArr: [],
      tree: [],
      loading: false,
      list: []
    }
  },
  computed: {
    jsonTree() {
      this.tree.forEach(el => (el.label = el.text))
      this.tree.forEach(el => (el.parentId = el.parent))
      return getJsonTree(this.tree)
    }
    // ORGNAME:function(){
    //   return this.ORG_NAME;
    // }
  },
  mounted() {},
  created() {
    this.searchTree()
  },
  methods: {
    openDia() {
      this.dialogVisible = true
      this.$nextTick(() => {
        // const tree = this.$refs['tree']
        this.searchTree()
      })
    },
    // 树加载
    searchTree() {
      this.loading = true
      getComOrgTreeList()
        .then(res => {
          this.deleteRes(res)
          this.loading = false
          this.tree = res
        })
        .catch(err => {
          this.loading = false
        })
    },
    // 删除无效数据(无父节点)
    deleteRes(res) {
      const result = []
      for (let i = 0; i < res.length && res[i].id != null; i++) {
        const pid = res[i].parent
        const oid = res[i].id
        result[oid] = pid
      }
      for (let j = 0; j < res.length; j++) {
        // 一级父节点跳过
        if (res[j].parent === '#') continue
        if (res[j] && result[res[j].parent] === null) {
          const index = j
          j = 0
          delete result[res[index].id]
          res.splice(index, 1)
        }
      }
    },
    // 选择数据
    handleNodeClick(data) {
      this.list = data
    },
    // 清除数据
    changeDE() {
      this.orgName = ''
      this.orgId = ''
      this.$emit('update:orgId', this.orgId)
      this.$emit('update:orgName', this.orgName)
    },
    // 确定
    confirmHandle() {
      if (this.list.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
        return false
      }
      this.$emit('getDepartmentOrgTree', this.list)
      this.list = []
      this.dialogVisible = false
    },
    clear() {
      this.list = []
      this.dialogVisible = false
    }

  }
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

</style>
